<template>
  <div class="tokutei-exam">
    <div class="page-header">
      <h1>{{ $t('exam.tokutei') }}</h1>
      <p class="subtitle">特定技能签证考试培训，助您成功获得日本工作签证</p>
    </div>

    <div class="content-wrapper">
      <!-- 考试介绍 -->
      <el-card class="exam-intro">
        <template #header>
          <div class="card-header">
            <span>考试介绍</span>
          </div>
        </template>
        <div class="intro-content">
          <p>特定技能签证是日本政府为吸引外国技术工人而设立的签证类型，涵盖多个行业领域。</p>
          <div class="exam-fields">
            <h3>考试领域：</h3>
            <el-row :gutter="20">
              <el-col :span="8" v-for="field in examFields" :key="field.name">
                <div class="field-item">
                  <el-icon class="field-icon"><component :is="field.icon" /></el-icon>
                  <h4>{{ field.name }}</h4>
                  <p>{{ field.description }}</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>

      <!-- 考试流程 -->
      <el-card class="exam-process">
        <template #header>
          <div class="card-header">
            <span>考试流程</span>
          </div>
        </template>
        <el-steps :active="1" align-center>
          <el-step title="报名注册" description="选择考试领域和时间" />
          <el-step title="学习准备" description="参加培训课程和模拟考试" />
          <el-step title="正式考试" description="参加特定技能考试" />
          <el-step title="获得证书" description="通过考试获得技能证书" />
        </el-steps>
      </el-card>

      <!-- 培训课程 -->
      <el-card class="training-courses">
        <template #header>
          <div class="card-header">
            <span>培训课程</span>
          </div>
        </template>
        <div class="courses-grid">
          <div v-for="course in courses" :key="course.id" class="course-card">
            <div class="course-image">
              <img :src="course.image" :alt="course.name" />
            </div>
            <div class="course-info">
              <h3>{{ course.name }}</h3>
              <p>{{ course.description }}</p>
              <div class="course-meta">
                <span class="duration">{{ course.duration }}</span>
                <span class="level">{{ course.level }}</span>
              </div>
              <el-button type="primary" @click="enrollCourse(course.id)">
                立即报名
              </el-button>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 考试时间表 -->
      <el-card class="exam-schedule">
        <template #header>
          <div class="card-header">
            <span>考试时间表</span>
          </div>
        </template>
        <el-table :data="examSchedule" style="width: 100%">
          <el-table-column prop="date" label="考试日期" width="120" />
          <el-table-column prop="field" label="考试领域" width="150" />
          <el-table-column prop="location" label="考试地点" />
          <el-table-column prop="deadline" label="报名截止" width="120" />
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button type="primary" size="small" @click="bookExam(scope.row)">
                报名
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'TokuteiExam',
  setup() {
    const router = useRouter()

    const examFields = ref([
      {
        name: '食品加工',
        description: '食品制造、加工、包装等相关技能',
        icon: 'Food'
      },
      {
        name: '餐饮服务',
        description: '餐厅服务、烹饪、食品卫生等技能',
        icon: 'Restaurant'
      },
      {
        name: '护理服务',
        description: '老年人护理、医疗辅助等技能',
        icon: 'User'
      },
      {
        name: '农业',
        description: '农作物种植、畜牧养殖等技能',
        icon: 'Plant'
      },
      {
        name: '汽车维修',
        description: '汽车检测、维修、保养等技能',
        icon: 'Car'
      },
      {
        name: '酒店服务',
        description: '客房服务、前台接待等技能',
        icon: 'House'
      }
    ])

    const courses = ref([
      {
        id: 1,
        name: '特定技能基础课程',
        description: '全面了解特定技能考试内容和要求',
        duration: '3个月',
        level: '初级',
        image: '/src/assets/index/study.jpg'
      },
      {
        id: 2,
        name: '专业技能强化班',
        description: '针对特定领域的专业技能培训',
        duration: '2个月',
        level: '中级',
        image: '/src/assets/index/study.jpg'
      },
      {
        id: 3,
        name: '模拟考试训练',
        description: '真实考试环境模拟，提高通过率',
        duration: '1个月',
        level: '高级',
        image: '/src/assets/index/study.jpg'
      }
    ])

    const examSchedule = ref([
      {
        date: '2024-03-15',
        field: '食品加工',
        location: '东京考试中心',
        deadline: '2024-02-15'
      },
      {
        date: '2024-04-20',
        field: '餐饮服务',
        location: '大阪考试中心',
        deadline: '2024-03-20'
      },
      {
        date: '2024-05-10',
        field: '护理服务',
        location: '名古屋考试中心',
        deadline: '2024-04-10'
      }
    ])

    const enrollCourse = (courseId) => {
      ElMessage.success('课程报名成功！')
      // 这里可以跳转到课程详情页面
    }

    const bookExam = (exam) => {
      router.push('/exam-booking')
    }

    return {
      examFields,
      courses,
      examSchedule,
      enrollCourse,
      bookExam
    }
  }
}
</script>

<style scoped>
.tokutei-exam {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2.5rem;
  color: #303133;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 1.2rem;
  color: #606266;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 1.2rem;
}

.exam-intro .intro-content {
  line-height: 1.6;
}

.exam-fields {
  margin-top: 20px;
}

.exam-fields h3 {
  margin-bottom: 15px;
  color: #303133;
}

.field-item {
  text-align: center;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  height: 100%;
}

.field-icon {
  font-size: 2rem;
  color: #409eff;
  margin-bottom: 10px;
}

.field-item h4 {
  margin: 10px 0;
  color: #303133;
}

.field-item p {
  color: #606266;
  font-size: 0.9rem;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.course-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.course-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.course-info {
  padding: 20px;
}

.course-info h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.course-info p {
  color: #606266;
  margin-bottom: 15px;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.duration, .level {
  background: #f0f2f5;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #606266;
}

@media (max-width: 768px) {
  .tokutei-exam {
    padding: 15px;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .courses-grid {
    grid-template-columns: 1fr;
  }
}
</style>
